<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工程管理系统</title>
<link rel="stylesheet" type="text/css"	th:href="@{/easyui/themes/default/easyui.css}">
<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/myicons.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/myCss.css}">


<script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/easyui/jquery.form.js}"></script>
<script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>

<script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>

<script type="text/javascript" th:src="@{/js/jquery.serializejson.js}"></script>
</head>

 <style> 
 	.left-list{
 	/*   background-color: #e6eef8;  
 	  border: #cfe1f7 2px solid;
      font-size: 14px;
      font-weight: 680;
      color:#002c73; */
  
       padding: 6px 15px;
       margin:2px 4px;
       border-radius:3px 3px;
 	}
 	.left-list2{
       padding: 6px 25px;
    }
 	.left-list:hover{
      background-color: #8D886B;  /*  C0C0C0 */
  /*      border: #cfe1f7 2px solid; */
    }
    .left-list2:hover{
       background-color: #8D886B;
    }
 	.left-list-selected{ /*   color:#002c73; */
 	   color:#ffffff;
 	   font-weight: 480;
 	   background-color: #DAA44B;    /*  FAC603 */
 	}
 	/* .icon-export{
        background:url('[[@{/images/bluetime.jpg}]]') no-repeat center center;
        background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    } */
    
     .wd50{
	    width:350px;
	 }
	 .wd100{
        width:760px;
     }
	  .wd10{
	    width:150px;
	 }
     .wd220{
       width:280px;
     }
     .wd12{
        width:120px;
     }
      .wd26{
         width:260px;
     }
     .wd18{
        width:180px;
     }
</style>
  </head>
<body class="easyui-layout">
<!-- 头部开始 -->
	<div data-options="region:'north'" style="height: 70px;overflow: hidden;padding: 0 10px;background: #01287d;">   <!-- 0A4FD0 -->
		  <div style="padding: 11px 0px;float:left;" >
		 	 <img th:src="@{/images/earth2.gif}"  style="width:55px;" >
		  </div>  
		  <div class="thr_head" style="float: left;color:#FFFFFF;">
		  		<h1 th:text="#{CSPMSName}">工程管理系统</h1>
		  </div>
		  <div class="user-info">
			 <!--  <div class="fl pr-5 pl-5">
				  	<a class="" href="@{/logout}">
				    	<span th:text=" #{welcome}+'，'+${username}"> Welcome Admin!</span>
				    	<span th:text="${username}"> Welcome Admin!</span>
				    </a> 
			  </div> -->
			  <!-- <div class="fl pr-5">
			   <form th:action="@{/changeSessionLanauage}"  method="get">
	                <input name="lang"type="hidden"value="zh" />
	                <button>简体中文</button>
		       </form>
	         </div>
	         <div class="fl pr-5"> 
		       <form th:action="@{/changeSessionLanauage}"  method="get">
		              <input name="lang" type="hidden" value="en"/>
		              <button>English(US)</button>
		       </form>
			  </div> -->
		 
		<!-- 	  <div class="fl pr-5">
				  	<a class="" href="@{/logout}">
				    	<img th:src="@{/images/admin.png}"  style="width:45px" >
				    </a> 
			  </div>
			  <div class="fl pr-5 pl-5">
				    <a class="" href="@{/logout}">
				    	<img th:src="@{/images/message.png}"  style="width:40px" >
				    </a>
			  </div> -->
			  <div class="fl pr-5 pl-5">
			    	  欢迎您：
			    	  <a class="" href="@{/logout}">
                        <!-- <span th:text=" #{welcome}+'，'+${username}"> Welcome Admin!</span> -->
                        <span th:text="${username}"> Welcome Admin!</span>
                       </a> 
                     |  系统消息  
                     <a class="" href="#" onclick="javascript:document.getElementById('notice').pause()">关闭音效</a>
                
                     
                     |&nbsp; <a class="" th:href="@{/logout}"> <span th:text=" #{Exit}"> Exit!</span> 
                      &nbsp;<img th:src="@{/images/Standby.png}"  style="width:30px" ></a>
			  </div>
			  <!-- <div class="fl pr-5">
			    	<a class="" href="@{/logout}"><img th:src="@{/images/Standby.png}"  style="width:30px" > </a>
			  </div> -->
		  </div>
	</div>
<!-- 头部结束 -->
<!-- 左侧开始 -->
	<!-- class="easyui-linkbutton" -->
	<div title="菜单导航" data-options="region:'west',iconCls:'fa fa-list'" style="width: 200px">
		<div class="easyui-accordion" data-options="fit:true,border:false,animate:true">
			<div  data-options="iconCls:'fa fa-cogs'"  th:each="MenuInfo: ${menuList}"  th:if="${MenuInfo.menuInfoPid} == 0"  th:title="${MenuInfo.menuInfoName}">
				 
				 <div class="left-list"  th:each="MenuInfo1: ${menuList}" th:if="${MenuInfo.menuInfoId} == ${MenuInfo1.menuInfoPid}" 
                      th:id="${MenuInfo1.menuInfoId}"  th:righturl="${MenuInfo1.menuInfoUrl}"  th:name="${MenuInfo1.menuInfoName}"
                      th:title="${MenuInfo1.menuInfoName}" th:mincode="${MenuInfo1.menuInfoPid}" >
                     <img th:src="@{/images/left-list.png}"  style="width:15px" >
                      <span th:text="${MenuInfo1.menuInfoName}">项目基本信息一览 </span>
				 </div>
			</div>
			<!-- <div title="生成器" data-options="iconCls:'fa fa-list'">
			     <div class="left-list" righturl="generate/generateInfo/queryForGenerateList" name="生成器" title="生成器">
			         <img th:src="@{/images/left-list.png}" style="width:15px" >  
			         <span>生成器List  </span>
			     </div>	
			     <div class="left-list" righturl="generate/generateInfo/addGenerateInfo" name="添加生成器" title="添加生成器">
                     <img th:src="@{/images/left-list.png}" style="width:15px" >  
                     <span>添加生成器Info</span>
                 </div> 		      
			</div> -->
		</div>
	</div>
<!-- 左侧结束 -->		
<!-- 中间开始 -->
<div title="" data-options="region:'center'"  style="overflow-x:hidden;text-align:center;">
	 <div id="tt" class="easyui-tabs" data-options="fit:true,border:false">
		<div title="首页"  ></div>
	</div>
<!-- 中间结束 -->
</div>
<!-- 底部开始 -->
 <div data-options="region:'south',border:false,animate:true" style="height:60px;text-align:center;background-color:#075CB9;color:#FFFFFF;">

 <!-- <div data-options="region:'south',border:false,animate:true" style="height:60px;text-align:center;background-color:#215D9C;color:#FFFFFF;"> -->
  <br/>@2018&nbsp;&nbsp;版权所有：山东中晟信息科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;技术支持：研发部<br/>
 联系地址：山东省济南市历下区银丰财富广场B座18层
 </div>	
 <!-- 底部结束 -->
 
 
 
 
 
 <#--播放音乐-->
<audio id="notice" loop="loop">
    <source th:src="@{/css/notice.mp3}" type="audio/mpeg" />
</audio>
 
 <!--关闭tab选项菜单-->  
<div id="tab_rightmenu" class="easyui-menu" style="width:120px; display:none">   
    <div name="tab_menu-tabcloseall" id="closeAll">关闭全部标签 </div>   
    <div name="tab_menu-tabcloseother" id="closeOthor">关闭其他标签 </div>   
    <div class="menu-sep">  </div>   
    <div name="tab_menu-tabcloseright" id="closeRight">关闭右侧标签</div>      
    <div name="tab_menu-tabcloseleft" id="closeLeft">关闭左侧标签</div>   
</div>  
 
</body>
<script type="text/javascript">
	 $(function () {
		 
		 var menuList=JSON.parse(("[[${ssList}]]").replace(/&quot;/g,"\""));
         var inLeftHtml='';
         for(var i=0;i<menuList.length;i++){         
             inLeftHtml='<div class="left-list left-list2 '+menuList[i].menuInfoPid+'" righturl="'+menuList[i].menuInfoUrl+
             '"  name="'+menuList[i].menuInfoName+'"  title="'+menuList[i].menuInfoName+
             '"> <img src="/cs/pms/images/usus.png"  style="width:15px" >  <span>'+
             menuList[i].menuInfoName+'</span></div>';
             $("#"+ menuList[i].menuInfoPid).after(inLeftHtml);
         }
	 
	      $(".left-list").click(function(){
	          $(this).addClass("left-list-selected").siblings('div').removeClass("left-list-selected");
	          $("."+$(this).attr("id")).slideToggle();
	          if($(this).attr("righturl")&&$(this).attr("righturl")!='null'&&$(this).attr("righturl")!='undefined'){
	              addTab(this.title,$(this).attr("righturl"));
	          }
	     });	    
	     $('#tt').tabs({
	        border:false
	     });
	     
	   //点击a下面有title的出发事件  
	        $("a[title]").click(function() {  
	              var src = $(this).attr("title");  
	              var title = $(this).text();  
	                  
	              var flag = $("#tt").tabs("exists",title);   
	              if(!flag) {  
	                  //在tab中添加选项卡  
	                  $('#tt').tabs('add',{     
	                        title: title,     
	                        content:'Tab Body',     
	                        closable:true    
	                  });   
	              } else {  
	                  $("#tt").tabs("select",title);                
	              }  
	        }); 
	   //tab右键触发时候所触发的函数  
	        $("#tt").tabs({  
	            onContextMenu:function(e, title) {  
	                //在每个菜单选项中添加title值  
	                var $divMenu = $("#tab_rightmenu div[id]");  
	                $divMenu.each(function() {  
	                    $(this).attr("id", title);  
	                });  
	                  
	                //显示menu菜单  
	                $('#tab_rightmenu').menu('show', {     
	                    left: e.pageX,    
	                    top: e.pageY     
	                });   
	                e.preventDefault();  
	            }  
	        });  
	        //实例化menu点击触发事件  
	        $('#tab_rightmenu').menu({  
	            "onClick":function(item) {  
	            	console.log(item);
	                closeTab(item.id,item.text);  
	            }  
	        });  
	 });
	 function addTab(title, url){
	        if ($('#tt').tabs('exists', title)){
	            $('#tt').tabs('select', title);/*  页面跳转   */
	            $('#tt').tabs('getSelected').panel('refresh');/*  页面刷新   */
	        } else {
	            $('#tt').tabs('add',{
	                id:title,
	                title:title,
	                href:url,
	                closable:true, 
	            });
	            $("#"+title).addClass("thr_tab");
	        }
	};
	
	
	
	
	//关闭  
    function closeTab(title, text) {  
        if(text == '关闭全部标签') {  
            $(".tabs li").each(function(index, obj) {  
                  //获取所有可关闭的选项卡  
                  var tabTitle = $(".tabs-closable", this).text();  
                  $("#tt").tabs("close", tabTitle);  
             });  
        }  
          
        if(text == '关闭其他标签') {  
            $(".tabs li").each(function(index, obj) {  
                  //获取所有可关闭的选项卡  
                  var tabTitle = $(".tabs-closable", this).text();  
                  if(tabTitle != title) {  
                    $("#tt").tabs("close", tabTitle);  
                  }  
             });  
        }  
          
        if(text == '关闭右侧标签') {  
             var $tabs = $(".tabs li");  
             for(var i = $tabs.length - 1; i >= 0; i--) {  
                //获取所有可关闭的选项卡  
                var tabTitle = $(".tabs-closable", $tabs[i]).text();  
                if(tabTitle != title) {  
                    $("#tt").tabs("close", tabTitle);  
                } else {  
                    break;  
                }  
             }  
        }  
          
        if(text == '关闭左侧标签') {  
             var $tabs = $(".tabs li");  
             for(var i = 0; i < $tabs.length; i++) {  
                //获取所有可关闭的选项卡  
                var tabTitle = $(".tabs-closable", $tabs[i]).text();  
                if(tabTitle != title) {  
                    $("#tt").tabs("close", tabTitle);  
                } else {  
                    break;  
                }  
             }  
        }  
    }  
    function bottomRight(message){
        $.messager.show({
            title:'消息提醒',
            msg:message,
            showType:'show'
        });
    }
    
     
    
    var websocket = null;
    if('WebSocket' in window) {
        websocket = new WebSocket('ws://127.0.0.1:8082/cs/pms/webSocket');
    }else {
        bottomRight('该浏览器不支持websocket连接!');
    } 

    //连接发生错误的回调方法
    websocket.onerror = function(){
       // bottomRight("websocket通信发生错误");
        console.log("建立websocket连接");
    }; 
    //连接成功建立的回调方法
    websocket.onopen = function(event){
     //   bottomRight("建立websocket连接");
        console.log("建立websocket连接");
    } 
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        
        console.log('收到消息:' + event.data);
        bottomRight(event.data);
        
        document.getElementById('notice').play();
    } 
    //连接关闭的回调方法
    websocket.onclose = function(){ 
     //   bottomRight("websocket连接关闭");
        console.log("websocket连接关闭");
    } 
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    } 
    //关闭连接
    function closeWebSocket(){
        websocket.close();
    } 
    //发送消息
    function send(id){
        var message = $("#"+id).val();
        websocket.send(message);
    } 
    
    
    
 </script>
<script type="text/javascript" th:src="@{/js/my.add.js}"></script>
<script type="text/javascript" th:src="@{/js/my.query.js}"></script>
</html>